<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/warehouse/stock' }">仓库管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/warehouse/stock' }">库存</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="order" class="user-search">  
            <el-form-item label="商品名称">
                <el-input size="small" v-model="order.num" placeholder="输入商品名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="addHandleEdit">添加</el-button>
            </el-form-item>
        </el-form>
       <!--列表-->
        <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
            
             <el-table-column sortable prop="warehouseNo" label="序号" width="150">
            </el-table-column>
            <el-table-column sortable prop="warehouseProName" label="商品名称" width="150">
            </el-table-column>
            <el-table-column sortable prop="warehouseNumber" label="库存数量" width="100">
            </el-table-column>
            <el-table-column sortable prop="warehouseNumberMin" label="最低库存" width="150">
            </el-table-column>
            <el-table-column sortable prop="warehouseNumberMax" label="最高库存" width="100">
            </el-table-column>
            <el-table-column align="center" label="操作" min-width="100" >
                <template slot-scope="scope">
                    <el-button size="mini"  type="primary" plain  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" plain @click="deleteUser(scope.$index, scope.row)">删除商品</el-button>
                </template>
            </el-table-column>
        </el-table>
         <!-- 分页  可以修改为组件-->
        <el-pagination class="page-box" 
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            background 
            :current-page="currentPage" 
            :page-sizes="[10, 20, 30, 40]" 
            :page-size="pageSize"  
            :total="total">
        </el-pagination>
        <!-- 编辑界面 -->
        <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
            <el-form label-width="120px" :model="editForm"   ref="editForm">
                <el-form-item label="商品名称" prop="warehouseProName">
                    <el-input size="small" v-model="editForm.warehouseProName" auto-complete="off" placeholder="请输入订单编号"></el-input>
                </el-form-item>
                <el-form-item label="库存数量" prop="warehouseNumber">
                    <el-input size="small" v-model="editForm.warehouseNumber" auto-complete="off" placeholder="请输入商品名称"></el-input>
                </el-form-item>
                 <el-form-item label="最低库存" prop="warehouseNumberMin">
                    <el-input size="small" v-model="editForm.warehouseNumberMin" auto-complete="off" placeholder="请输入商品价格"></el-input>
                </el-form-item>
                <el-form-item label="最高库存" prop="warehouseNumberMax">
                    <el-input size="small" v-model="editForm.warehouseNumberMax" auto-complete="off" placeholder="请输入商品价格"></el-input>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="closeDialog">取消</el-button>
                <el-button size="small" v-if="editForm.warehouseProName && editForm.warehouseNumber && editForm.warehouseNumberMin && editForm.warehouseNumberMax" type="primary" :loading="loading" @click="submitForm('editForm')" >保存</el-button>
                <el-button size="small" v-else type="primary"  class="title"  disabled>保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    name: "Stock",
    data() {
        return {
            loading: false, //是显示加载,
            pageSize: 7,   //每页数量
            currentPage: 1,  //当前页,
            total: 2,  //总数据条数
            editFormVisible: false, //控制编辑页面显示与隐藏
            dist: "", //区别唯一标识符  add 添加  del删除  edit编辑
            distNum: "",  //编辑的第几条数据
            order: {
                names: "",
                num: "",
                trading: ""
            },
            listData: [ 
                {
                    warehouseNo:8001  ,//序号号
                    warehouseProName: "商品名称1", //商品名称
                    warehouseNumber: 10,   //商品数量
                    warehouseNumberMin: 50,    //最低库存
                    warehouseNumberMax: 200,  //最高库存
                },
                
            ],
            editForm: {
                    warehouseNo:""  ,//序号号
                    warehouseProName: "", //商品名称
                    warehouseNumber: "",   //商品数量
                    warehouseNumberMin: "",    //最低库存
                    warehouseNumberMax: "",  //最高库存
                },
            title: '添加',
            dataStore: [],  //存储旧的数据
            searchArr: []
        }
    },
    methods: {
        search() {
        //    可以直接从mock模拟新的数据替换
            let goods = this.order.num;
            if (!goods) {
                this.handleCurrentChange(1);
                this.total = this.dataStore.length;
                return;
            }
            let newArr = [];
            let reg = new RegExp(goods);
            this.dataStore.forEach(e => {
                if (reg.test(e.warehouseProName)) {
                    newArr.push(e);
                }
            })
            this.listData = newArr;
            this.total = newArr.length;
        },
        //add
        addHandleEdit() {
            this.clearData();
            this.dist = "add";
            this.title = "添加商品";
            this.editFormVisible = true;
            

        },
        // 修改
        handleEdit(index, row) {
            this.title =  row.warehouseProName;
            this.dist = "edit";
            this.distNum = index;
            this.editFormVisible = true;
            //数据渲染到dialog
            this.editForm.warehouseProName = row.warehouseProName;
            this.editForm.warehouseNumber = row.warehouseNumber;
            this.editForm.warehouseNumberMin = row.warehouseNumberMin;
            this.editForm.warehouseNumberMax = row.warehouseNumberMax;

        },
        handleSizeChange(val) {
           this.pageSize = val 
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            let pageSize = this.pageSize;
            let da = this.dataStore;
            let i = (val - 1) * pageSize;
            let arr = da.slice(i , i + pageSize);
            this.listData = arr;
        },
        //提交保存
        submitForm(editData) {

             
            if(this.dist == "add") {
               
                this.dataStore.push({
                    warehouseNo: this.listData.length + 1,  //序号
                    warehouseProName: this.editForm.warehouseProName,   //商品名称
                    warehouseNumber: this.editForm.warehouseNumber,         //库存数量
                    warehouseNumberMin: this.editForm.warehouseNumberMin,  //最小库存
                    warehouseNumberMax: this.editForm.warehouseNumberMax,  //最大库存
                   
                })
            } else if (this.dist == "edit") {
                // console.log(this.distNum, this.editForm.logisticsUserName)
                this.listData[this.distNum].warehouseProName = this.editForm.warehouseProName;
                this.listData[this.distNum].warehouseNumber = this.editForm.warehouseNumber;
                this.listData[this.distNum].warehouseNumberMin = this.editForm.warehouseNumberMin;
                this.listData[this.distNum].warehouseNumberMax = this.editForm.warehouseNumberMax;

                let position = this.pageSize * (this.currentPage - 1 ) + this.distNum;
                this.dataStore[position].warehouseProName = this.editForm.warehouseProName;
                this.dataStore[position].warehouseNumber = this.editForm.warehouseNumber;
                this.dataStore[position].warehouseNumberMin = this.editForm.warehouseNumberMin;
                this.dataStore[position].warehouseNumberMax = this.editForm.warehouseNumberMax;
        
            } 
            //清空内容
            this.clearData();
            //关闭dialog
            this.editFormVisible = false;
                
            
        },
        //关闭dialog
        closeDialog() {
            this.editFormVisible = false;
            //数据清空
            this.clearData();
        },
        //删除
        deleteUser(index, row) {
            this.dist = "del"
            console.log(index, row);
            //根据商品代码检索到对应数据remove  splice
            let flag = false;
            this.dataStore.forEach((element, i) => {
                if (element.warehouseNo == row.warehouseNo) {
                    //找到商品
                    flag = true;
                    this.listData.splice(index, 1);
                    this.dataStore.splice(i, 1);
                    this.total -= 1;
                    this.handleCurrentChange(this.currentPage); 
                    this.$message({
                        showClose: true,
                        message: '删除成功',
                        type: 'success'
                    });
                   
                } 
            })
            if (!flag) {
                this.$message.error('您所要删除的商品不存在');
            }
        },
        clearData() {
            this.editForm.warehouseProName   = "";
            this.editForm.warehouseNumber    = "";
            this.editForm.warehouseNumberMin = "";
            this.editForm.warehouseNumberMax ="";
        }
    },
    
    mounted() {
        axios.get("/warehouse/stock")
            .then(
                res => {
                    this.dataStore = res.data.data;
                    this.handleCurrentChange(1);
                    // this.listData = res.data.data;
                    this.total = res.data.data.length;
                    // console.log(res.data.data)
                }
            )
    }
}
</script>

<style scoped>
.el-form {
    margin: 0;
    padding: 0;
    text-align: left;
}
.el-pagination {
    margin-top: 20px;
}
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>